import React from 'react';
import './index.scss';
import Canvas from '@/core/Canvas';
import emitter from '../emitter';
import XUE from '../XUE';
import Event from '@/event/Event';
import PathLayer from '@/layer/PathLayer';

export default class extends React.Component {
    constructor(props) {
        super(props);
        this.ref = React.createRef();
        this.current = null;
        this.components = {};
    }

    componentDidMount() {
        this.canvas = new Canvas({
            ele: this.ref.current,
            canAction: false,
        });
        emitter.on('new:node', (args) => {
           const { type, id } = args;
           console.log('type====>', args);
            const component = XUE.getComponent(this.canvas, type);
            component.ext = id;
            this.components[id] = component;
            component.addEventListener(Event.EVENT_CLICK, (e) => {
               const sprite = e.node.sprite;
               const style = XUE.extend({}, sprite);
                if (this.current != null) {
                    this.current.setVisible(false);
                }
                style.left = e.node.left;
                style.bottom = e.node.bottom;
                style.width = e.node.width;
                style.height = e.node.height;
                this.current = e.node;
                this.current.setVisible(true);
                emitter.emit('select:node', { id, style });
            });
            component.onResize = (node, style) => {
                console.log('style====>', style);
                emitter.emit('node:keyframe:style', {
                    id: node.ext,
                    style
                });
            }
            const style = XUE.extend({}, {
                ...component.sprite,
                left: component.left,
                bottom: component.bottom,
                width: component.width,
                height: component.height,
            });
            emitter.emit('new:node:created', { id, style });
            console.log('component==>', component);
            this.canvas.addChild(component);
            this.canvas.paint();
        });
        emitter.on('node:keyframe:select', (args) => {
            const { id, style } = args;
            console.log('components===>', this.components);
            const component = this.components[id];
            Object.assign(component, {
                left: style.left,
                bottom: style.bottom,
                width: style.width,
                height: style.height,
            });
            const targetStyle = XUE.extend({}, style);
            console.log('target style===>', targetStyle, style);
            delete targetStyle.left;
            delete targetStyle.bottom;
            delete targetStyle.width;
            delete targetStyle.height;
            XUE.extend(component.sprite, targetStyle);
            // console.log('component===>', component);
            this.canvas.paint();
        });
        const path = new PathLayer(this.canvas, {
           width: '100%',
           height: '100%',
           left: 0,
           bottom: 0,
        });
        this.canvas.addChild(path);
    }

    render() {
        return (
          <div className="scene-box" ref={this.ref}>

          </div>
        );
    }
}
